<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>实时数据监控系统</title>
    <link rel="stylesheet" href="assets/css/style.css">
    <link rel="stylesheet" href="assets/css/dashboard.css">
    <link rel="stylesheet" href="assets/css/chart.css">
    <link rel="stylesheet" href="assets/css/notification.css">
</head>
<body>
    <div class="dashboard-container">
        <!-- 顶部导航栏 -->
        <header class="navbar">
            <div class="logo">
                <h1>实时监控系统</h1>
            </div>
            <div class="nav-controls">
                <button class="btn" id="history-toggle">历史回放</button>
                <button class="btn" id="settings-toggle">设置</button>
                <div class="notification-icon" id="notification-icon">
                    <span class="bell">🔔</span>
                    <span class="badge" id="notification-badge">0</span>
                </div>
                <div class="user-profile">
                    <span>管理员</span>
                </div>
            </div>
        </header>

        <!-- 侧边栏 -->
        <aside class="sidebar">
            <nav class="sidebar-nav">
                <ul>
                    <li class="nav-item active" data-dashboard="main">
                        <span class="icon">📊</span>
                        <span class="text">总览仪表盘</span>
                    </li>
                    <li class="nav-item" data-dashboard="finance">
                        <span class="icon">💰</span>
                        <span class="text">金融数据</span>
                    </li>
                    <li class="nav-item" data-dashboard="iot">
                        <span class="icon">📱</span>
                        <span class="text">物联网设备</span>
                    </li>
                    <li class="nav-item" data-dashboard="performance">
                        <span class="icon">⚡</span>
                        <span class="text">性能监控</span>
                    </li>
                    <li class="nav-item" data-dashboard="alerts">
                        <span class="icon">⚠️</span>
                        <span class="text">告警中心</span>
                    </li>
                </ul>
            </nav>
        </aside>

        <!-- 主内容区 -->
        <main class="main-content">
            <!-- 总览仪表盘 -->
            <div class="dashboard active" id="dashboard-main">
                <div class="dashboard-header">
                    <h2>系统总览</h2>
                    <div class="header-controls">
                        <select id="time-range">
                            <option value="1m">最近1分钟</option>
                            <option value="5m">最近5分钟</option>
                            <option value="15m">最近15分钟</option>
                            <option value="1h">最近1小时</option>
                            <option value="24h">最近24小时</option>
                        </select>
                        <button class="btn" id="refresh-data">刷新数据</button>
                    </div>
                </div>

                <!-- 数据卡片 -->
                <div class="stats-cards">
                    <div class="stat-card">
                        <div class="stat-header">
                            <h3>实时数据量</h3>
                            <span class="unit">条/秒</span>
                        </div>
                        <div class="stat-value" id="data-rate">0</div>
                        <div class="stat-trend positive">↑ 12.5%</div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-header">
                            <h3>活跃设备数</h3>
                            <span class="unit">台</span>
                        </div>
                        <div class="stat-value" id="active-devices">0</div>
                        <div class="stat-trend positive">↑ 5.2%</div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-header">
                            <h3>系统负载</h3>
                            <span class="unit">%</span>
                        </div>
                        <div class="stat-value" id="system-load">0</div>
                        <div class="stat-trend negative">↓ 3.1%</div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-header">
                            <h3>告警数量</h3>
                            <span class="unit">条</span>
                        </div>
                        <div class="stat-value" id="alert-count">0</div>
                        <div class="stat-trend critical">↑ 8.7%</div>
                    </div>
                </div>

                <!-- 图表区域 -->
                <div class="charts-grid">
                    <div class="chart-card">
                        <div class="chart-header">
                            <h3>实时数据流</h3>
                            <div class="chart-controls">
                                <span class="status-indicator live"></span>
                                <span>已连接</span>
                            </div>
                        </div>
                        <div class="chart-container">
                            <canvas id="real-time-chart"></canvas>
                        </div>
                    </div>
                    <div class="chart-card">
                        <div class="chart-header">
                            <h3>数据分布</h3>
                            <div class="chart-controls">
                                <select class="chart-filter">
                                    <option value="type">按类型</option>
                                    <option value="source">按来源</option>
                                    <option value="region">按区域</option>
                                </select>
                            </div>
                        </div>
                        <div class="chart-container">
                            <canvas id="distribution-chart"></canvas>
                        </div>
                    </div>
                    <div class="chart-card full-width">
                        <div class="chart-header">
                            <h3>系统性能监控</h3>
                            <div class="chart-controls">
                                <span class="performance-indicator" id="performance-score">良好</span>
                            </div>
                        </div>
                        <div class="chart-container">
                            <canvas id="performance-chart"></canvas>
                        </div>
                    </div>
                </div>

                <!-- 最近告警 -->
                <div class="alerts-section">
                    <div class="section-header">
                        <h3>最近告警</h3>
                        <button class="btn-link">查看全部</button>
                    </div>
                    <div class="alerts-list" id="recent-alerts">
                        <!-- 告警项将动态添加 -->
                    </div>
                </div>
            </div>

            <!-- 其他仪表盘 (默认隐藏) -->
            <div class="dashboard" id="dashboard-finance">
                <div class="dashboard-header">
                    <h2>金融数据监控</h2>
                </div>
                <div class="chart-card full-width">
                    <div class="chart-container">
                        <canvas id="finance-chart"></canvas>
                    </div>
                </div>
            </div>

            <div class="dashboard" id="dashboard-iot">
                <div class="dashboard-header">
                    <h2>物联网设备监控</h2>
                </div>
                <div class="devices-grid" id="devices-grid">
                    <!-- 设备卡片将动态添加 -->
                </div>
            </div>

            <div class="dashboard" id="dashboard-performance">
                <div class="dashboard-header">
                    <h2>系统性能监控</h2>
                </div>
                <div class="performance-metrics" id="performance-metrics">
                    <!-- 性能指标将动态添加 -->
                </div>
            </div>

            <div class="dashboard" id="dashboard-alerts">
                <div class="dashboard-header">
                    <h2>告警中心</h2>
                </div>
                <div class="alerts-table-container">
                    <table class="alerts-table" id="alerts-table">
                        <thead>
                            <tr>
                                <th>时间</th>
                                <th>类型</th>
                                <th>级别</th>
                                <th>来源</th>
                                <th>描述</th>
                                <th>状态</th>
                            </tr>
                        </thead>
                        <tbody>
                            <!-- 告警数据将动态添加 -->
                        </tbody>
                    </table>
                </div>
            </div>
        </main>

        <!-- 通知面板 -->
        <div class="notification-panel" id="notification-panel">
            <div class="panel-header">
                <h3>通知中心</h3>
                <button class="close-btn" id="close-notifications">×</button>
            </div>
            <div class="notifications-list" id="notifications-list">
                <!-- 通知将动态添加 -->
            </div>
        </div>

        <!-- 历史回放面板 -->
        <div class="history-panel" id="history-panel">
            <div class="panel-header">
                <h3>历史数据回放</h3>
                <button class="close-btn" id="close-history">×</button>
            </div>
            <div class="history-controls">
                <div class="date-range">
                    <label>开始时间：</label>
                    <input type="datetime-local" id="history-start">
                </div>
                <div class="date-range">
                    <label>结束时间：</label>
                    <input type="datetime-local" id="history-end">
                </div>
                <div class="playback-controls">
                    <button class="btn" id="playback-backward">⏪</button>
                    <button class="btn" id="playback-play">▶️</button>
                    <button class="btn" id="playback-pause">⏸️</button>
                    <button class="btn" id="playback-forward">⏩</button>
                </div>
                <div class="speed-control">
                    <label>播放速度：</label>
                    <input type="range" min="0.1" max="5" step="0.1" value="1" id="playback-speed">
                </div>
            </div>
        </div>

        <!-- 设置面板 -->
        <div class="settings-panel" id="settings-panel">
            <div class="panel-header">
                <h3>系统设置</h3>
                <button class="close-btn" id="close-settings">×</button>
            </div>
            <div class="settings-content">
                <div class="setting-group">
                    <h4>数据更新频率</h4>
                    <select id="update-frequency">
                        <option value="1000">每秒</option>
                        <option value="500">500毫秒</option>
                        <option value="200">200毫秒</option>
                        <option value="100">100毫秒</option>
                    </select>
                </div>
                <div class="setting-group">
                    <h4>告警阈值设置</h4>
                    <div class="threshold-setting">
                        <label>CPU使用率告警阈值：</label>
                        <input type="number" min="1" max="100" value="80" id="cpu-threshold">
                    </div>
                    <div class="threshold-setting">
                        <label>内存使用率告警阈值：</label>
                        <input type="number" min="1" max="100" value="85" id="memory-threshold">
                    </div>
                    <div class="threshold-setting">
                        <label>数据延迟告警阈值（ms）：</label>
                        <input type="number" min="1" value="500" id="latency-threshold">
                    </div>
                </div>
                <div class="setting-group">
                    <h4>通知设置</h4>
                    <div class="notification-setting">
                        <input type="checkbox" id="enable-sound" checked>
                        <label for="enable-sound">声音提醒</label>
                    </div>
                    <div class="notification-setting">
                        <input type="checkbox" id="enable-visual" checked>
                        <label for="enable-visual">视觉提醒</label>
                    </div>
                </div>
                <button class="btn primary" id="save-settings">保存设置</button>
            </div>
        </div>
    </div>

    <!-- 加载遮罩 -->
    <div class="loading-overlay" id="loading-overlay">
        <div class="loading-spinner"></div>
        <p>正在加载数据...</p>
    </div>

    <script src="assets/js/lib/chart.js"></script>
    <script src="assets/js/system.js"></script>
    <script src="assets/js/websocket-client.js"></script>
    <script src="assets/js/data-engine.js"></script>
    <script src="assets/js/alert-engine.js"></script>
    <script src="assets/js/history-player.js"></script>
    <script src="assets/js/dashboard-manager.js"></script>
    <script src="assets/js/app.js"></script>
</body>
</html>